<template>
    <div class="page-address-add">
        <div class="list-item after-line normal-text">
            <span class="list-item-left">姓名</span>
            <div class="list-item-content">
                <input v-model="name" class="list-input right block" placeholder="请输入收件人姓名" type="text">
            </div>
        </div>
        <div class="list-item after-line normal-text">
            <span class="list-item-left">手机号</span>
            <div class="list-item-content">
                <input v-model="mobile" class="list-input right block" placeholder="请输入收件人联系方式" maxlength="11" type="number">
            </div>
        </div>
        <wx-picker class="list-item after-line normal-text" mode="region" @change="onChangeDistrict">
            <div class="clearfix">
                <span class="list-item-left">所在地区</span>
                <span class="list-item-right">{{districtText ? districtText : '点击选择'}}</span>
            </div>
        </wx-picker>
        <div class="list-item after-line normal-text">
            <span class="list-item-left">详细地址</span>
            <div class="list-item-content">
                <input v-model="address" class="list-input right block" placeholder="请输入收件人详细地址" type="text">
            </div>
        </div>
        <div class="btn-wrap">
            <div class="btn btn-mobile btn-white-red btn-large btn-block" @click="onClickConfirm">
                {{addressId ? '确认' : '创建'}}
            </div>
        </div>
        <div v-if="addressId" class="btn-wrap">
            <div class="btn btn-mobile btn-red-grey btn-large btn-block" @click="onClickDelete">
                删除
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store/index';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'AddressAdd',
})
export default class AddressAdd extends Vue {
    /** 收货人名字 */
    public name = '';
    /** 收货人手机号 */
    public mobile = '';
    /** 收货人详细地址 */
    public address = '';
    /** 收货人地区 */
    public districtList: any = [];

    /** 地址id */
    public get addressId() {
        return this.$route.params.addressId;
    }
    /** 默认地址 */
    public get default() {
        return store.state.address.default;
    }

    /** 地址详情 */
    public get detailMap() {
        return store.state.address.detail;
    }

    /** 允许保存 */
    public get enableSave() {
        return this.name.trim() && this.mobile.trim() && this.address.trim();
    }

    /** 收货地址详情 */
    public get addressDetail() {
        return this.detailMap[this.addressId] || null;
    }

    /** 收货人地区 */
    public get districtText() {
        return this.districtList.join('');
    }

    // onClickTag(tag) {
    //     if (this.tag === tag) {
    //         this.tag = '';
    //     } else {
    //         this.tag = tag;
    //     }
    // },
    public async onClickConfirm() {
        if (!this.mobile || this.mobile.length !== 11) {
            wx.showToast({
                title: '手机号格式错误',
                icon: 'none',
            });
            return;
        }
        store.commit('utils/startRequest');
        const type = this.addressId ? 'address/update' : 'address/create';
        const data: any = {
            title: '家',
            name: this.name,
            mobile: this.mobile,
            province: this.districtList[0],
            city: this.districtList[1],
            district: this.districtList[2],
            detail: this.address,
            tag: [],
            isDefault: false,
        };
        if (this.addressId) {
            data.addressId = this.addressId;
        }
        const res = await store.dispatch(type, data);
        store.commit('utils/endRequest');

        if (res.statusCode === 200 && res.data.status === 0) {
            wx.showToast({
                title: this.addressId ? '更新成功' : '添加成功',
                icon: 'success',
                duration: 2000,
            });
            setTimeout(() => {
                wx.navigateBack();
            }, 2000);
        } else {
            wx.showToast({
                title: res.data.message,
                icon: 'none',
            });
        }
    }

    /**
     * 更换地区
     */
    public onChangeDistrict(e: any) {
        this.districtList = e.target.value;
    }

    /**
     * 点击删除
     */
    public async onClickDelete() {
        store.commit('utils/startRequest');
        const res = await store.dispatch('address/delete', {
            addressId: this.addressId,
        });
        store.commit('utils/endRequest');
        if (res.statusCode === 200 && res.data.status === 0) {
            await store.dispatch('address/getList');
            wx.showToast({
                title: '删除成功',
                duration: 2000,
            });
            setTimeout(() => {
                wx.navigateBack();
            }, 2000);
        } else {
            wx.showToast({
                title: res.data.message,
                icon: 'none',
            });
        }
    }

    public async created(query) {
        await store.dispatch('address/getDefault');

        const addressDetail = this.addressDetail;
        if (addressDetail) {
            this.name = addressDetail.name;
            this.mobile = addressDetail.mobile;
            this.districtList = [
                addressDetail.province,
                addressDetail.city,
                addressDetail.district,
            ];
            this.address = addressDetail.detail;
        } else {
            this.name = this.mobile = this.address = '';
            this.districtList = [];
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-address-add {
    .btn-wrap {
        padding: 30rpx 30rpx 10rpx;
    }
    .list-item {
        .list-item-left {
            line-height: 52rpx;
        }
    }
    .tag-item {
        margin: 4rpx 0 0 10rpx;
    }
}

</style>
